<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-aside width="200px">
          <el-menu
            active-text-color="#fff"
            background-color="#202b30"
            class="el-menu-vertical-demo"
            default-active="/index/home"
            text-color="#8a9790"
            @open="handleOpen"
            @close="handleClose"
            :unique-opened="true"
            :router="true"
          >
            <p class="title">MALL4J建站后台</p>
            <el-menu-item index="/index/home">
              <el-icon><HomeFilled /></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-sub-menu
              v-for="(item, index) in tableData"
              :key="index"
              :index="item.name"
            >
              <template #title>
                <!-- <el-icon><Setting /></el-icon> -->
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item
                v-for="(item1, index) in item.children"
                :key="index"
                :index="item1.url"
                >{{ item1.name }}</el-menu-item
              >
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-header>
            <div class="user">
              <el-avatar shape="square" size="" :src="state.squareUrl" />
              <el-dropdown>
                <span class="el-dropdown-link">
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="toedit"
                      >修改用户</el-dropdown-item
                    >
                    <el-dropdown-item @click="tologin"
                      >退出登录</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </el-header>
          <el-main>
            <RouterView />
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script lang='ts' setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  HomeFilled,
  TakeawayBox,
  ArrowDown,
} from "@element-plus/icons-vue";
import { reactive, onMounted, ref } from "vue";
import { getuser } from "../../api/UserApi";
import { getmenu } from "../../api/MenuApi";
import { useRouter } from "vue-router";
import { getTreeFromList } from "../../utils/index";
import { ElMessage, ElMessageBox } from "element-plus";

const router = useRouter();

const state = reactive({
  squareUrl:
    "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
});

// 用户id
let uid = localStorage.getItem("uid");

// 数据
const tableData = ref();

onMounted(() => {
  getuser(uid).then((res) => {
    state.squareUrl = res.data.data[0].img;
  });
  getmenu().then((res) => {
    tableData.value = getTreeFromList(res.data.data, 2);
  });
});

// 点击修改用户执行的函数
const toedit = () => {
  router.push("/index/my");
};

// 点击退出登录执行的函数
const tologin = () => {
  ElMessageBox.confirm("你确定要退出登录吗？退出后将重新登录", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      localStorage.removeItem("token");
      localStorage.removeItem("uid");
      router.push("/login");
      ElMessage({
        type: "success",
        message: "退出成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消退出",
      });
    });
};

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.title {
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  height: 50px;
  background-color: #02a1e9;
  color: white;
  font-weight: bold;
}
.el-aside {
  height: 97vh;
  background-color: #263238;
}
.el-header {
  height: 50px;
  border-bottom: 1px solid #ccc;
}
.el-main {
  padding: 10px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
}
.el-dropdown {
  margin-top: 25px;
  margin-left: 5px;
}
.user {
  float: right;
  margin-right: 10px;
}
</style>
